Error-Message Guidelines 錯誤資訊

設計有效的錯誤資訊需要確保其高可見性建設性溝通,並且尊重使用者的努力。根據可用性專家 Jakob Nielsen 的“可用性啟發式原則”中的第 9 條——“幫助使用者識別、診斷並解決錯誤”,錯誤資訊是可用體驗的重要組成部分。儘管團隊通常專注於理想化的使用者路徑,但偏離該路徑的場景往往被忽視,這使得錯誤資訊成為使用者體驗中的薄弱環節。

可見性指南 (Visibility Guidelines)

1 將錯誤資訊顯示在錯誤來源附近:將錯誤指示器放置在錯誤發生的介面元素旁,減少使用者的認知負擔。

不佳:Instagram 的錯誤資訊遠離 URL 輸入框,且樣式低調,不易被注意到。

2 使用明顯、冗餘且可訪問的指示器

好的:亞馬遜採用了幾種技術來表示錯誤:邊框突出顯示、圖示和紅色文字
好:CafePress 展示一個動畫橫幅,以吸引使用者注意到空白的定製欄位。

3 根據錯誤影響設計錯誤表現:根據問題嚴重程度調整錯誤資訊設計。輕微問題可用橫幅或標籤提示,而嚴重問題需模態對話方塊要求使用者解決。示例:

良好:Kohl’s 透過非傳統紅色樣式通知潛在運輸延誤,避免使用者感到困擾。

4 避擴音前顯示錯誤:不應在使用者還未完成操作時顯示錯誤,以免引發困惑或沮喪。對易出錯的場景,可以使用實時反饋降低使用者糾錯成本。

良好:CLEAR 透過實時提示密碼要求,指導使用者完成輸入。
不佳:德克薩斯州的車輛註冊頁面在使用者點選輸入框後立即顯示空欄位錯誤。

溝通指南 (Communication Guidelines)

1 使用人性化語言:避免技術術語,使用使用者熟悉的語言表述錯誤資訊。將技術性程式碼或縮寫隱藏或弱化顯示。示例:404 頁面常因使用“技術程式碼”而難以理解。

2 簡潔準確地描述問題:提供上下文,具體說明問題所在,避免僅使用通用短語如“發生錯誤”。同時避免過度技術化描述導致理解困難。示例:

不佳:Disneyworld 在無搜尋結果時用雙關語掩蓋問題,未清晰說明原因。

3 提供建設性建議:錯誤資訊需說明如何解決問題。

電商網站的“缺貨”提示應提供預計到貨時間或訂閱通知的選項。示例:Target 提示需消費更多以享受當天送貨,同時避免責備使用者未購買足夠商品。

4 語氣積極且不責怪使用者:避免使用“無效”、“非法”等責備性詞語,將問題歸因於系統,而非使用者操作失誤。避免幽默,以免頻繁出現時引發使用者厭煩。

National Geographic Kids 對未成年使用者缺乏解釋性錯誤資訊,不利於其理解操作限制。

效率指南 (Efficiency Guidelines)

1 防範常見錯誤:系統應透過提前檢測常見錯誤(如郵件缺少附件),防止使用者陷入誤操作。示例:現代郵件應用會提醒使用者檢查附件,避免傳送錯誤。

好的:電子郵件應用程式已經發展到可以檢測並警告常見的電子郵件錯誤,例如忘記新增附件。

2 保留使用者輸入:當使用者輸入出錯時,系統應保留其原始輸入,以便使用者在原基礎上修改,而非重新輸入。示例:Instagram 在使用者退出時提供儲存草稿選項,防止內容丟失。

好的:如果使用者在向 Instagram 故事新增圖片時返回,系統會提供一個選項,將其工作儲存為草稿以避免丟失。

3 減少糾錯成本:系統應透過建議性選項幫助使用者快速糾正錯誤。例如,當城市與郵編不匹配時,提供匹配的城市選項。示例:提供城市選擇按鈕,減少使用者手動糾正錯誤的負擔。

簡明教育使用者系統工作原理:簡單解釋系統工作方式,並透過超連結指向更詳細的說明檔案。示例:Vistaprint 告知使用者超出列印區域的文書處理方式。

好:Vistaprint 說明瞭對於定製襯衫,放置在可列印區域之外的文字將會發生什麼情況。

糟糕:儘管 Zazzle 展示了襯衫可列印區域的指南,但它沒有警告使用者有關文字被截斷的問題,這可能導致設計併購買到一件不符合期望的襯衫。

在極端情況下用創新緩解失敗 (Mitigate Failure with Novelty in Dire Situations)

對於嚴重系統故障(如伺服器過載)無可挽回時,可透過新穎設計緩解使用者負面體驗。

良好:ChatGPT 在停機時提供教育性內容,保持使用者興趣。
良好:Twitter 的“失敗鯨”影象以幽默方式傳遞服務中斷資訊,成為廣為人知的符號。

錯誤資訊在使用者與計算機的互動中不可避免。遵循上述指導原則,可以有效減輕使用者挫敗感,幫助使用者更快、更自信地完成任務,從而提升整體使用者體驗。